<template>
  <section class="sp-section sp-upload">
    <el-upload
      drag
      :file-list="fileList"
      action=""
      name="file"
      :auto-upload="false"
      :on-change="getUpload"
      :on-error="() => { $message.error('上传失败') }"
      :on-success="() => { $message.success('上传成功') }"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将视频拖到此处，或<em>点击选择文件</em></div>
      <div class="el-upload__tip" slot="tip">只能上传视频文件，且不建议超过60MB</div>
    </el-upload>
    <el-form :model="form" label-width="100px" style="margin-top: 50px;">
      <!-- <el-form-item label="上传人"></el-form-item> -->
      <el-form-item label="产品分类">
        <!-- <el-select v-model="form.product_id" placeholder="请选择产品分类">
          <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select> -->
        <template v-for="(item, $index) in list">
          <el-tag class="sp-map__header-type" :effect="$index === listIndex ? 'dark' : 'plain'" :key="$index" @click="getProductTags($index)">{{ item.name }}</el-tag>
          &nbsp;
        </template>
      </el-form-item>
      <el-form-item label="剧本内容">
        <!-- <el-select></el-select> -->
        <!-- <el-select v-model="form.tags" multiple placeholder="请选择标签">
          <el-option
            v-for="item in tags"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->
        <template v-for="(item, $index) in tags">
          <el-tag class="sp-map__header-type" :effect="item.checked ? 'dark' : 'plain'" :key="$index" @click="getTypeTags($index)">{{ item.label }}</el-tag>
          &nbsp;
        </template>
      </el-form-item>
      <el-form-item label="标题/简述">
        <el-input type="textarea" placeholder="请输入视频标题或简要描述" v-model="form.contents"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-left: 100px;" @click="submit">提交</el-button>
    <!-- <el-button class="sp-upload__button" type="primary" @click="setUpload">确定上传</el-button> -->
  </section>
</template>

<script>
// setDouyinInfo
import { uploadDouyinFile, getDouyinProduct, setDouyinInfo, getDouyinCate } from '@/api/douyin.js'

export default {
  name: 'Upload',
  components: {},
  props: {},
  data () {
    return {
      list: [],
      listIndex: 0,
      tags: [
        // { value: '剧情', label: '剧情', checked: false },
        // { value: 'PPT', label: 'PPT', checked: false },
        // { value: '测评', label: '测评', checked: false },
        // { value: 'vlog', label: 'vlog', checked: false }
      ],
      fileList: [],
      auth: {
        openid: ''
      },
      form: {
        product_id: '',
        contents: '',
        file_url: ''
      }
    }
  },
  created () {},
  mounted () {
    this.auth.openid = window.localStorage.getItem('token')
    this.getProduct()
    this.getCategory()
  },
  destroyed () {},
  methods: {
    // 提交
    async submit () {
      const params = {
        ...this.form,
        ...this.auth
      }
      params.cate_id = this.tags.filter(item => item.checked).map(item => item.value)
      if (params.contents === '') {
        this.$message.error('请输入标题/简述')
        return false
      }
      if (params.file_url === '') {
        this.$message.error('请上传文件')
        return false
      }
      if (params.cate_id) {
        params.cate_id = params.cate_id.join(',')
      }
      // console.log('数据的form', this.form)
      // console.log('数据是啥样的', params)
      const { status } = await setDouyinInfo(params)
      // console.log('data', data)
      status && this.$message.success('上传成功')
    },
    // 分类
    async getCategory () {
      const { data } = await getDouyinCate()
      console.log('cate', data)
      this.tags = data.map(item => {
        const obj = {
          value: item.id,
          label: item.name,
          checked: false
        }
        return obj
      })
    },
    // 产品
    async getProduct () {
      const { data } = await getDouyinProduct()
      console.log('product', data)
      this.list = data.map(item => {
        item.color = ''
        return item
      })
      if (this.list && this.list.length) {
        this.form.product_id = this.list[0].id
        this.listIndex = 0
      }
    },
    // 上传
    async getUpload (e) {
      console.log(e)
      this.fileList = []
      this.form.contents = e.name
      const formData = new FormData()
      formData.append('file', e.raw)
      formData.append('openid', this.auth.openid)
      const { data } = await uploadDouyinFile(formData)
      console.log('data', data)
      this.form.file_url = data
      this.fileList = [{ name: this.form.contents, url: this.form.file_url }]
    },
    getProductTags (index) {
      this.listIndex = index
      this.form.product_id = this.list[index].id
    },
    getTypeTags (index) {
      this.tags[index].checked = !this.tags[index].checked
    }
  }
}
</script>

<style lang="scss" scoped>
  .sp-upload {
    position: relative;
    padding-bottom: 20px;

    &__button {
      position: absolute;
      width: 130px;
      left: 50%;
      top: 60%;
      margin-left: -65px;
    }

    ::v-deep .el-upload {
      display: block;
    }
    ::v-deep .el-upload-dragger {
      width: 100%;
      height: 300px;
      padding-top: 60px;
    }
  }
</style>
